<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>徽章</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">
</head>
<body>
    <h1>徽章</h1>
    <span class="badge bg-primary">主要</span>
    <span class="badge badge-secondary">次要的</span>
    <span class="badge bg-danger">危险的</span>
    <span class="badge  bg-success">成功</span>
    <hr>
    <h1>胶囊徽章</h1>
    <span class="badge bg-primary rounded-pill">主要</span>
    <span class="badge badge-secondary rounded-pill">次要的</span>
    <span class="badge bg-danger rounded-pill">危险的</span>
    <span class="badge  bg-success rounded-pill">成功</span>
    <hr>
    <ul class="list-inline">
        <li class="list-inline-item">首页</li>
        <li class="list-inline-item">分类</li>
        <li  class="list-inline-item bg-primary">
            消息
            <span class="badge bg-danger rounded-pill">5</span>
        </li>
    </ul>
</body>
</html>